<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>蔡关社区</title>
<!-- Bootstrap -->
 <link rel="stylesheet" href="../public/css/netmap/css.css" media="all">
 <link rel="stylesheet" href="../public/css/netmap/bootstrap.min.css" media="all">
</head>
<body>
	<div id="cg-community-box">
		<div class="community-title">
			<span>蔡关社区第 {{ gridId }} 网格 {{ buildingId }}栋</span>
		</div>
		<div class="unit-box">
			<div class="unit-msg">
				<div class="col-md-12 address">
					<span>地址：</span>
					<span>{{ mapBuilding.address }}</span>
				</div>
				<div class="col-md-4 col-sm-4 col-xs-4 personInCharge">
					<span>负责人：</span>
					<span>{{ mapBuilding.adminName }}</span>
				</div>
				<div class="col-md-8 col-sm-8 col-xs-8">
					<span>联系电话：</span>
					<span>{{ mapBuilding.adminTelphone }}</span>
				</div>
			</div>
			<div class="unit-explain">
				<div class="col-md-12">
					<div class="explain">
						<div class="color-22ad38"></div>
						<span>空置房屋</span>
					</div>
					<div class="explain">
						<div class="color-b5b5b7"></div>
						<span>未录入</span>
					</div>
					<div class="explain">
						<div class="color-f8b62c"></div>
						<span>已录入</span>
					</div>
				</div>
				<div class="col-md-12">
					<div class="explain">
						<div class="color-7e318f"></div>
						<span>门店</span>
					</div>
					<div class="explain">
						<div class="color-fff100"></div>
						<span>单位</span>
					</div>
					<div class="explain">
						<div class="color-e70012"></div>
						<span>租聘房</span>
					</div>
				</div>
			</div>
			<div class="unit-table">
				<table class="table table-striped table-bordered table-hover">
					<tr>				
						<td>居住人数</td>
						<td>所属网格</td>
						<td>所属社区</td>
						<td>所属街道</td>
					</tr>
					<tr class="content">						
						<td>{{ liveNumber }}</td>
						<td>第{{ gridId }}网格</td>
						<td>{{ mapBuilding.street }}</td>
						<td>{{ mapBuilding.adminstrativeArea }}</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="statistics-box">
			<span>共有房屋<span class="number">  {{ totalRoom }}</span>套</span>，
			<span>未录入<span class="number">{{ notMacth }}</span>套！</span>
			<span class="live-picture">实景图片</span>
			<img :src="mapBuilding.mapPic" style="display:none"/> 
		</div>
		<div class="household-box">
			<table>
				<tr>
					<td>楼层</td>
					<td id="house-number">门牌号</td>
				</tr>
				 <template v-for="floor of floors">
				      <tr>
				          <td>{{ floors-floor+1 }}</td>				      
				       <template v-for="room of rooms">
					        <template v-if="hasPerson(floors-floor+1+'-'+room)">
					            <td class="yiluru" >{{floors-floor+1}}-{{room}}</td>
					        </template>
					        <template v-else>
					         <td class="weiluru" >{{floors-floor+1}}-{{room}}</td>
					        </template>
				        </template>
				      </tr>
				</template> 
			</table>
		</div>
	</div>
<script src="../plugins/vue/vue.min.js"></script>
<script src="../plugins/vue/bootstrap.min.js"></script> 
<script src="../plugins/layui/layui.js"></script>
<script src="./js/netmap_floor.js"></script>
</body>
</html>
